<template>
  <div class="orderDetail">
    <s-Header name="我的订单" @callback="close"></s-Header>

    
    <div class="order_status">
      <div class="price_item">
        <label for="order_status" >订单状态：</label>
        <span id="order_status">{{ state.detail.orderStatusString }}</span>
      </div>
      <div class="price_item">
        <label for="order_code" >订单编号：</label>
        <span id="order_code">{{ state.detail.orderNo }}</span>
      </div>
      <div class="price_item">
        <label for="order_time" >下单时间：</label>
        <span id="order_time">{{ state.detail.createTime  }}</span>
      </div>
      <van-button v-if="state.detail.orderStatus == 3" size="small"  @click="handleConfirmOrder(state.detail.orderNo)">确认收货</van-button>
      <van-button v-if="state.detail.orderStatus == 0"  block size="small" type="primary" @click="goToPay">去支付</van-button>
      <van-button  v-if="!(state.detail.orderStatus < 0 || state.detail.orderStatus == 4)" block size="small" type="default" @click="closeOrder(state.detail.orderNo)">取消订单</van-button>
    </div>

    <div class="order_price">
      <div class="price_item">
        <label for="price" >商品金额：</label>
        <span id="price">{{ state.detail.totalPrice  }}</span>
      </div>
      <div class="price_item">
        <label for="sendType" >配送方式：</label>
        <span id="sendType">{{ '普通快递'  }}</span>
      </div>
    </div>

    <van-card
      v-for="one in state.detail.newBeeMallOrderItemVOS"
      :key="one.orderId"
      :num="one.goodsCount"
      :price="one.sellingPrice"
      desc="全场包邮"
      :title="one.goodsName"
      :thumb="$filters.prefix(one.goodsCoverImg)"
    />

    <van-popup
      v-model:show="state.showPay"
      position="bottom"
      round
      :close-on-click-overlay="true"
      :style="{ height: '24%'}"
    >
      <div class="popup_pay" v-if="true">
        <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="handlePayOrder(state.detail.orderNo, 1)">支付宝支付</van-button>
        <van-button color="#4fc08d" block @click="handlePayOrder(state.detail.orderNo, 2)">微信支付</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
  import { useRoute, useRouter } from 'vue-router'
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted  } from 'vue'
  import { showConfirmDialog ,showSuccessToast, showFailToast, showLoadingToast, closeToast, closeDialog  } from 'vant'
  import { getOrderDetail, cancelOrder, confirmOrder, payOrder } from '@/service/order'
  import sHeader from '@/components/SimpleHeader.vue'

  const router = useRouter();
  const route = useRoute();
  console.log('router...',router,route)

  const state = reactive({
    detail: {},
    showPay: false
  })
  onMounted( async()=>{
    init()
    // const {currPage, list, pageSize, totalCount, totalPage} = data;
    // console.log(111,currPage, list, pageSize, totalCount, totalPage);

  })

  const init = async ()=>{
    showLoadingToast({
      message: '加载中...',
      forbidClick: true
    });
    const {id} = route.query;
    const {data} = await getOrderDetail(id);
    console.log(1111,data)
    state.detail = data;
    closeToast()
  }

  const goToPay = () => {
    console.log('goToPay...')
    state.showPay = true;
  }

  // 取消下单
  const closeOrder = (id) => {
    showConfirmDialog({
      title: '确认取消订单？',
    }).then(() => {
      cancelOrder(id).then(res => {
        if (res.resultCode == 200) {
          showSuccessToast('删除成功')
          init()
        }
      })
    }).catch(() => {
      // on cancel
    });
  } 

   // 确认收货
   const handleConfirmOrder = (id) => {
    showConfirmDialog({
      title: '是否确认订单？',
    }).then(() => {
      confirmOrder(id).then(res => {
        if (res.resultCode == 200) {
          showSuccessToast('确认成功')
          init()
        }
      })
    }).catch(() => {
      // on cancel
    });
  }

  // 确认支付
  const handlePayOrder = async(orderNo,type) => {
    const { data } = await payOrder({orderNo: orderNo, payType: type})
    console.log('handlePayOrder...',orderNo,type)
    state.showPay = false
    init()
  } 

 
  const close = () => {
    closeDialog()
  }
  const goBack = () => {
    router.go(-1)
  }
  const goTo = (r, query) => {
    router.push({ path: r, query: query || {} })
  }
  
</script>
  

<style lang="less" >
   .orderDetail{
      
      .order_price,
      .order_status{
        margin:10px;
        padding: 10px;
        border-radius: 6px;
        box-shadow: 1px 1px 4px 0px #ccc;
        .van-button{
          margin-top:4px;
        }
        label{
          font-size: 15px;
          color: #999;
          font-weight: 500;
        }
        span{
          font-size: 14px;
        }
      }

      .van-card{
        margin:10px;
        border-radius: 6px;
        box-shadow: 1px 1px 4px 0px #ccc;
      }
      .van-popup{
        .popup_pay{
          margin: 20px;
        }
      }
   }
</style>
<style lang="less" scoped>
   
</style>